<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%--
  ~ Copyright (c) 2017 22420103@QQ.COM 版权所有
  ~
  --%>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<meta name="description" content="Draggabble Widget Boxes with Persistent Position and State" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<c:set var="ctx" value="${pageContext.request.contextPath}" />
		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="${ctx }/static/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${ctx }/static/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${ctx }/static/assets/css/jquery-ui.custom.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="${ctx }/static/assets/css/fonts.googleapis.com.css" />

		<link rel="stylesheet" href="${ctx }/static/assets/css/bootstrap-datepicker3.min.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="${ctx }/static/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<!--[if lte IE 9]>
			<link rel="stylesheet" href="${ctx }/static/assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->
		<link rel="stylesheet" href="${ctx }/static/assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="${ctx }/static/assets/css/ace-rtl.min.css" />
		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="${ctx }/static/assets/css/ace-ie.min.css" />
		<![endif]-->
		<!-- inline styles related to this page -->
		<!-- ace settings handler -->
		<script src="${ctx }/static/assets/js/ace-extra.min.js"></script>
		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
		<!--[if lte IE 8]>
		<script src="${ctx }/static/assets/js/html5shiv.min.js"></script>
		<script src="${ctx }/static/assets/js/respond.min.js"></script>
		<![endif]-->
	</head>

	<body style="background-color: #fff;">
	<div class="main-content-inner">
		<div class="page-content">
			<div class="row">
				<div class="col-sm-9">
					<form id="queryGoldDetailQueryForm" class="form-inline">

						<div class="input-group">
							<c:if test="${1 == sessionScope.session_admin_user_key.roleId}">
							<input type="text" id="id" name="id" style="width: 150px" class="form-control" placeholder="请输入充值用户Id"/>
							</c:if>
							<input type="hidden" id="roleId" value="${sessionScope.session_admin_user_key.roleId}" />
							<input type="text" id="userId" name="userId" style="width: 150px" class="form-control" placeholder="请输入被充值用户Id"/>
						</div>
						<div class="input-group input-daterange"  style="width: 60%">

							<input type="text" class="form-control" name="startDate" value="${startDate }" placeholder="开始日期">
							<span class="input-group-addon">
								<i class="fa fa-exchange"></i>
							</span>
							<input type="text" class="form-control" name="endDate" value="${endDate }" placeholder="结束日期">

							<div class="input-group-btn">
								<button id="submitQueryBtn" type="button" class="btn btn-purple btn-sm" onclick="loadData()">
									<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
									查询
								</button>
							</div>
						</div>

					</form>
				</div>
			</div>
			<div id=context>
			</div>
		</div>
	</div>

	</body>
	<script src="${ctx }/static/assets/js/jquery-2.1.4.min.js"></script>
	<script src="${ctx }/static/assets/js/bootstrap-datepicker.min.js"></script>
	<script src="${ctx }/static/js/paging.js"></script>
	<script>
		var ctx = "${ctx}";
		var dataUrl = ctx + "/admin/finance/queryGoldDetailList";
		var contextId = "context";
		var formId = "queryGoldDetailQueryForm";
        $('.input-daterange').datepicker({
            autoclose:true,
            format:"yyyy-mm-dd"
        });
        //loadData();
        function loadData(){
            var roleId = $("#roleId").val();
            if(roleId == 1){
                if($("#id").val() == '' && $("#userId").val() == ''){
                    alert("请输入用户条件");
                    return;
                }
			}else{
                if($("#userId").val() == ''){
                    alert("请输入用户条件");
                    return;
                }
			}

            var data = $("#queryGoldDetailQueryForm").serialize();
            $.ajax({
                type:"POST",
                url:dataUrl,
                data:data,
                cache:false,
                success:function(data){
                    $("#context").html(data);
                }
            });
        }
	</script>

</html>
